<template>
  <el-dialog
    :model-value="visible"
    title="轮播图详情"
    width="800px"
    @close="handleClose"
  >
    <div v-if="loading" class="loading-container">
      <el-skeleton :rows="8" animated />
    </div>

    <div v-else-if="carouselData" class="carousel-detail">
      <!-- 轮播图图片预览 -->
      <div class="detail-section">
        <h3 class="section-title">轮播图图片</h3>
        <div class="image-container">
          <el-image
            :src="carouselData.imageUrl"
            :preview-src-list="[carouselData.imageUrl]"
            fit="contain"
            style="width: 100%; max-height: 300px; border-radius: 8px"
          >
            <template #error>
              <div class="image-error">
                <el-icon><Picture /></el-icon>
                <span>图片加载失败</span>
              </div>
            </template>
          </el-image>
        </div>
      </div>

      <!-- 基本信息 -->
      <div class="detail-section">
        <h3 class="section-title">基本信息</h3>
        <el-descriptions :column="2" border>
          <el-descriptions-item label="标题" :span="2">
            <span class="title-text">{{ carouselData.title }}</span>
          </el-descriptions-item>
          <el-descriptions-item label="跳转链接" :span="2">
            <el-link
              v-if="carouselData.link"
              :href="carouselData.link"
              target="_blank"
              type="primary"
            >
              {{ carouselData.link }}
              <el-icon class="link-icon"><Link /></el-icon>
            </el-link>
            <span v-else class="no-link">暂无跳转链接</span>
          </el-descriptions-item>
          <el-descriptions-item label="排序值">
            <el-tag type="info">{{ carouselData.sort }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="状态">
            <el-tag :type="carouselData.status === 1 ? 'success' : 'danger'">
              {{ carouselData.status === 1 ? '启用' : '禁用' }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="开始时间" :span="2">
            {{ carouselData.startTime || '立即生效' }}
          </el-descriptions-item>
          <el-descriptions-item label="结束时间" :span="2">
            {{ carouselData.endTime || '永久有效' }}
          </el-descriptions-item>
          <el-descriptions-item v-if="carouselData.remark" label="备注" :span="2">
            {{ carouselData.remark }}
          </el-descriptions-item>
        </el-descriptions>
      </div>

      <!-- 时间信息 -->
      <div class="detail-section">
        <h3 class="section-title">时间信息</h3>
        <el-descriptions :column="2" border>
          <el-descriptions-item label="创建时间">
            {{ carouselData.createTime }}
          </el-descriptions-item>
          <el-descriptions-item label="更新时间">
            {{ carouselData.updateTime || carouselData.createTime }}
          </el-descriptions-item>
        </el-descriptions>
      </div>

      <!-- 链接分析 -->
      <div v-if="carouselData.link" class="detail-section">
        <h3 class="section-title">链接分析</h3>
        <div class="link-analysis">
          <el-alert
            v-if="carouselData.link.startsWith('/')"
            title="内部链接"
            type="info"
            show-icon
            :closable="false"
          >
            <template #default>
              <p>这是一个内部页面链接，将跳转到小程序的指定页面</p>
              <p><strong>链接路径：</strong>{{ carouselData.link }}</p>
            </template>
          </el-alert>
          <el-alert
            v-else-if="carouselData.link.startsWith('http')"
            title="外部链接"
            type="warning"
            show-icon
            :closable="false"
          >
            <template #default>
              <p>这是一个外部网站链接，将在浏览器中打开</p>
              <p><strong>目标地址：</strong>{{ carouselData.link }}</p>
            </template>
          </el-alert>
          <el-alert
            v-else
            title="未知链接类型"
            type="error"
            show-icon
            :closable="false"
          >
            <template #default>
              <p>链接格式可能不正确，请检查链接设置</p>
              <p><strong>链接内容：</strong>{{ carouselData.link }}</p>
            </template>
          </el-alert>
        </div>
      </div>

      <!-- 生效状态分析 -->
      <div class="detail-section">
        <h3 class="section-title">生效状态分析</h3>
        <div class="status-analysis">
          <el-alert
            v-if="isCurrentlyActive"
            title="当前生效中"
            type="success"
            show-icon
            :closable="false"
          >
            <template #default>
              <p>此轮播图目前正在生效时间内，用户可以在小程序中看到</p>
              <p v-if="carouselData.endTime"><strong>失效时间：</strong>{{ carouselData.endTime }}</p>
            </template>
          </el-alert>
          <el-alert
            v-else-if="isNotStarted"
            title="未开始生效"
            type="info"
            show-icon
            :closable="false"
          >
            <template #default>
              <p>此轮播图尚未开始生效</p>
              <p><strong>开始时间：</strong>{{ carouselData.startTime }}</p>
            </template>
          </el-alert>
          <el-alert
            v-else-if="isExpired"
            title="已过期"
            type="warning"
            show-icon
            :closable="false"
          >
            <template #default>
              <p>此轮播图已过生效期，用户无法在小程序中看到</p>
              <p><strong>结束时间：</strong>{{ carouselData.endTime }}</p>
            </template>
          </el-alert>
          <el-alert
            v-else-if="carouselData.status === 0"
            title="已禁用"
            type="error"
            show-icon
            :closable="false"
          >
            <template #default>
              <p>此轮播图已被禁用，用户无法在小程序中看到</p>
              <p>即使处于生效时间内，禁用状态的轮播图也不会显示</p>
            </template>
          </el-alert>
          <el-alert
            v-else
            title="永久生效"
            type="success"
            show-icon
            :closable="false"
          >
            <template #default>
              <p>此轮播图设置为永久生效，只要处于启用状态就会一直显示</p>
            </template>
          </el-alert>
        </div>
      </div>
    </div>

    <div v-else class="no-data">
      <el-empty description="暂无轮播图信息" />
    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">关闭</el-button>
        <el-button type="primary" @click="handleEdit">编辑轮播图</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, computed, watch } from 'vue'
import { ElMessage } from 'element-plus'
import { Picture, Link } from '@element-plus/icons-vue'
import { carouselAPI } from '@/api/banner'

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  carouselId: {
    type: [Number, String],
    default: null
  }
})

const emit = defineEmits(['update:visible', 'edit'])

// 响应式数据
const loading = ref(false)
const carouselData = ref(null)

// 计算属性
const isCurrentlyActive = computed(() => {
  if (!carouselData.value || carouselData.value.status === 0) return false
  const now = new Date()
  const startTime = carouselData.value.startTime ? new Date(carouselData.value.startTime) : null
  const endTime = carouselData.value.endTime ? new Date(carouselData.value.endTime) : null

  return (!startTime || startTime <= now) && (!endTime || endTime >= now)
})

const isNotStarted = computed(() => {
  if (!carouselData.value || carouselData.value.status === 0) return false
  const startTime = carouselData.value.startTime ? new Date(carouselData.value.startTime) : null
  return startTime && startTime > new Date()
})

const isExpired = computed(() => {
  if (!carouselData.value || carouselData.value.status === 0) return false
  const endTime = carouselData.value.endTime ? new Date(carouselData.value.endTime) : null
  return endTime && endTime < new Date()
})

// 获取轮播图详情
const fetchCarouselDetail = async () => {
  if (!props.carouselId) return

  loading.value = true
  try {
    const response = await carouselAPI.getDetail(props.carouselId)
    carouselData.value = response.data
  } catch (error) {
    console.error('获取轮播图详情失败:', error)
    ElMessage.error('获取轮播图详情失败')
  } finally {
    loading.value = false
  }
}

// 监听props变化
watch(() => props.visible, (visible) => {
  if (visible && props.carouselId) {
    fetchCarouselDetail()
  }
})

watch(() => props.carouselId, (newId) => {
  if (props.visible && newId) {
    fetchCarouselDetail()
  }
})

// 关闭对话框
const handleClose = () => {
  emit('update:visible', false)
  carouselData.value = null
}

// 编辑轮播图
const handleEdit = () => {
  emit('edit', carouselData.value)
  handleClose()
}
</script>

<style lang="scss" scoped>
.carousel-detail {
  .detail-section {
    margin-bottom: 24px;

    &:last-child {
      margin-bottom: 0;
    }
  }

  .section-title {
    font-size: 16px;
    font-weight: 600;
    color: #303133;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid #e4e7ed;
  }

  .image-container {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 16px;
    text-align: center;

    .image-error {
      width: 100%;
      height: 200px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      background-color: #f5f7fa;
      border-radius: 4px;
      color: #c0c4cc;
      gap: 8px;

      .el-icon {
        font-size: 32px;
      }

      span {
        font-size: 14px;
      }
    }
  }

  .title-text {
    font-size: 16px;
    font-weight: 600;
    color: #303133;
  }

  .no-link {
    color: #909399;
    font-style: italic;
  }

  .link-icon {
    margin-left: 4px;
    font-size: 14px;
  }

  .link-analysis,
  .status-analysis {
    .el-alert {
      margin-bottom: 12px;

      &:last-child {
        margin-bottom: 0;
      }
    }

    p {
      margin: 4px 0;

      &:first-child {
        margin-top: 0;
      }

      &:last-child {
        margin-bottom: 0;
      }
    }
  }
}

.loading-container {
  padding: 20px 0;
}

.no-data {
  padding: 40px 0;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}
</style>